<template>
  <div id="clothingtype">
    <el-form :inline="true" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-button type="primary" @click="addS()">新增一级</el-button>
      </el-form-item>
    </el-form>
    <el-table ref="table" stripe v-loading="dataListLoading" :data="dataList" header-row-class-name="table_header">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table stripe v-loading="dataListLoading" :data="scope.row.subjectNestedList">
            <el-table-column v-for="row in headerList" :key="row.key" :prop="row.key" :min-width="row.width" :label="row.label" header-align="center" align="center"></el-table-column>
            <el-table-column min-width="150px" label="图片" header-align="center" align="center">
              <template slot-scope="scopes">
                <img :src="scopes.row.pictureUrl" class="pictureUrl">
              </template>
            </el-table-column>
            <el-table-column label="操作" header-align="center" align="center" width="200">
              <template slot-scope="scopes">
                <div class="detail_box">
                  <el-button class="detailButton" type="text" size="mini" @click="editS2(scope.row, scopes.row)">修改</el-button>
                  <el-button class="detailButton" type="text" size="mini" @click="deleteS(scopes.row.id)">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column v-for="row in headerList" :key="row.key" :prop="row.key" :min-width="row.width" :label="row.label" header-align="center" align="center"></el-table-column>
      <el-table-column label="操作" header-align="center" align="center" width="300">
        <template slot-scope="scope">
          <div class="detail_box">
            <el-button class="detailButton" type="text" size="mini" @click="editS(scope.row)">修改</el-button>
            <el-button class="detailButton" type="text" size="mini" @click="addS2(scope.row)">新增二级</el-button>
            <el-button class="detailButton" type="text" size="mini" @click="deleteS(scope.row.id)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <classify-change ref="classifyChange" @refreshDataList="getDataList"/>
  </div>
</template>

<script>
import classifyChange from './classifyChange'
export default {
  components: {
    classifyChange
  },
  data () {
    return {
      headerList: [{
        key: 'dictName',
        label: '分类名',
        width: '150'
      }],
      dataList: [],
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false
    }
  },
  activated () {
    this.getDataList()
  },
  methods: {
    // 增加菜单
    addS () {
      this.$refs.classifyChange.show('0', '0')
    },
    // 修改一级菜单
    editS (row) {
      this.$refs.classifyChange.show('1', '0', row)
    },
    // 新增二级菜单
    addS2 (row) {
      this.$refs.classifyChange.show('0', '1', row)
    },
    // 修改二级菜单
    editS2 (row, rows) {
      this.$refs.classifyChange.show('1', '1', row, rows)
    },
    // 删除菜单
    deleteS (id) {
      this.$confirm('确定要删除该分类吗?', '删除分类', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送网络请求删除 成功以后删除列表中的数据
        this.$http({
          url: this.$http.adornUrl('/clothingtype/' + [id]),
          method: 'delete'
        }).then(({ data: res }) => {
          if (res && res.code === 0) {
            this.$message.success('删除成功！')
            this.getDataList()
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
      })
    },
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/clothingtype/typepage'),
        method: 'get'
      }).then(({ data: res }) => {
        if (res && res.code === 0) {
          this.dataList = res.data
        } else {
          this.dataList = []
        }
        this.dataListLoading = false
      })
    }
  }
}
</script>

<style lang="scss">
.pictureUrl{
  width: 100px;
  height: 100px;
}
</style>
